<template>
<!-- 待支付 -->
<layout title="订单详情" background="#fff">
  <view class="order-detail complete">
    <view class="card">
      <view class="card-title">
        <image :src="getImgSrc('/cuser/icon_complete@2x.png')" />任务已完成</view>
      <!-- <view class="card-desc mg-t-30 mg-b-20">本次跑腿服务预计里程 {{ orderInfo.km || "-" }} 公里，本次任务用时{{ orderInfo.min || "-" }}分钟。点我拿：我离你很近，也一直在身边。</view> -->
      <view class="card-desc mg-t-30 mg-b-20">本次任务用时{{ DateDiff(orderInfo.arriveTime, orderInfo.createTime) }}分钟。</br>点我拿：我离你很近，也一直在身边。</view>
		</view>

    <view class="card mg-t-30">
      <view class="people pd-t-10">
        <view class="people-avatar">
          <image :src="orderInfo.runner.head || getImgSrc('/cuser/head.png')" />
        </view>
        <view class="people-info">
          <view>{{orderInfo.runner ? orderInfo.runner.name || "-" : "-"}}</view>
          <!-- <view>
						共完成任务 {{ orderInfo.runner ? orderInfo.runner.totalOrderCount : "-" }} 次，综合评分
						<text>{{orderInfo.runner ? orderInfo.runner.score : "5.0"}}</text>分
					</view> -->
					<view>
						共完成 {{ orderInfo.runner ? orderInfo.runner.totalOrderCount : "-" }} 次赏金任务，评分
						<text>{{orderInfo.runner ? orderInfo.runner.score : "5.0"}}</text>
					</view>
				</view>
				<view class="people-btn mg-l-a mg-t-10" @tap="callService">
					<image :src="getImgSrc('/cuser/icon_service@2x.png')" mode="aspectFit" />客服
				</view>
			</view>
			<view class="divider mg-t-30" v-if="orderInfo.status ===4" ></view>
      <view class="people mg-t-45" v-if="orderInfo.status === 4">
        <!-- <view class="people-tip">
          <view>请确认是否完成？</view>
          <view>24小时后将自动确认</view>
        </view>
        <view class="people-btn mg-l-a" @tap="triggerToConfirm(1)">
          已完成
        </view> -->
        <!-- <view class="people-btn mg-l-20" @tap="triggerToConfirm(0)">
          未送达
        </view> -->
      </view>
    </view>

    <view class="card list mg-t-30">
      <view class="list-info pd-t-10">
        <view class="list-info-label">快递公司:</view>
        <view class="list-info-value">{{ orderInfo.kdName }}</view>
      </view>
      <view class="list-info">
        <view class="list-info-label">快递单号:</view>
        <view class="list-info-value">{{ orderInfo.kdNo || "-" }}
          <image class="list-icon-copy" :src="getImgSrc('/cuser/icon_copy@2x.png')" @tap="clip(orderInfo.kdNo)" />
        </view>
      </view>

      <view class="divider mg-t-45 mg-b-50" />

      <view class="list-info">
        <view class="list-info-label">任务号:</view>
        <view class="list-info-value">{{ orderInfo.tradeNo || "-" }}
          <image class="list-icon-copy" @tap="clip" :src="getImgSrc('/cuser/icon_copy@2x.png')" />
        </view>
      </view>
      <view class="list-info">
        <view class="list-info-label">完成时间:</view>
        <view class="list-info-value">{{ orderInfo.arriveTime }}</view>
      </view>
      <view class="list-info">
        <view class="list-info-label">发布时间:</view>
        <view class="list-info-value">{{ orderInfo.createTime }}</view>
      </view>
      <view class="divider mg-t-55 mg-b-35" />
      <view class="order-footer">
        <view v-if="orderInfo.status === 5">
          <image class="star" :src="getImgSrc('/cuser/icon_star_light@2x.png')" mode="aspectFit" />
          <view @tap="show = true" v-if="orderInfo.score === null" class="mg-b-20">去评价</view>
        </view>
        <view v-else-if="orderInfo.score" class="mg-b-20">
          <view class="score-list">
            <image v-for="(item, idx) in 5" :key="idx" class="star" :src="
                  idx >= star
                    ? getImgSrc('/cuser/icon_star@2x.png')
                    : getImgSrc('/cuser/icon_star_light@2x.png')
                " mode="aspectFit" />
            <view class="score-modal-count">已评价 {{ star }}.0分</view>
          </view>
        </view>
      </view>
    </view>
    <u-modal v-model="show" :show-title="false" :show-confirm-button="false" :show-cancel-button="false">
      <view class="slot-content">
        <view class="score-modal">
          <image class="score-modal-icon" :src="getImgSrc('/hall/icon_close@2x.png')" @tap="show = false" />
          <view class="score-modal-head" >请为赏金猎人进行评分</view>
          <view class="score-modal-body">
            <view class="score-list">
              <image v-for="(item, idx) in 5" :key="idx" class="star" @tap="star = idx + 1" :src="
                    idx >= star
                      ? getImgSrc('/cuser/icon_star@2x.png')
                      : getImgSrc('/cuser/icon_star_light@2x.png')
                  " mode="aspectFit" />
              <view class="score-modal-count" >{{ star }}.0分</view>
            </view>
            <button class="score-modal-btn" @tap="triggerToScore">
              确定
            </button>
          </view>
        </view>
      </view>
    </u-modal>
  </view>
</layout>
</template>

<script>
import OrderMixin from "./mixin";
import { call } from "@/common/location.js";

export default {
  mixins: [OrderMixin],
  data() {
    return {
      show: false,
      star: 5,
			dateDiff: '',
    };
  },
  onShow() {
	},
	onLoad(){
		console.log(this.orderInfo)
	},
  watch: {},
  methods: {
    triggerToScore() {
      this.$u.api
        .invokeHallTaskScore({
          no: this.orderInfo.tradeNo,
          score: this.star,
        })
        .then((res) => {
          if (res.code === 200) {
            uni.showToast({
              title: "评价成功",
            });
            this.show = false
            this.$emit("onRefresh");
          } else {
            uni.showToast({
              title: res.mess,
            });
          }
        });
    },
    callService() {
      call(this.phone || "");
    },
    triggerToConfirm(flag) {
      this.$u.api
        .invokeOrderConfirm({
          tradeNo: this.orderInfo.tradeNo,
          flg: flag,
        })
        .then((res) => {
          uni.showToast({
            title: "操作成功",
          });
          this.$emit("onRefresh");
        });
    },
		DateDiff(timeStart, timeEnd) {
			if(timeStart && timeEnd) {
				let start = new Date(timeStart.replace(/-/g,'/'))
				let end = new Date(timeEnd.replace(/-/g,'/'))
				return Math.ceil((Math.abs(end - start) / 1000 / 60))
			}else {
				return '-'
			}
			
		}
  },
};
</script>

<style lang="scss" scoped>
@import "./index.scss";

.complete {
  min-height: 100%;
  padding-bottom: 45rpx;
  padding-top: 30rpx;

  .divider {
    width: 100%;
    height: 1rpx;
    background: #eaeaea;
  }

  .people {
    display: flex;

    &-avatar {
      flex-basis: 90rpx;
      width: 90rpx;
      height: 90rpx;
      border-radius: 45rpx;
      overflow: hidden;

      image {
        width: 100%;
        height: 100%;
      }
    }

    &-info {
      padding-left: 11rpx;

      &>view:first-child {
        margin-top: 10rpx;
        margin-bottom: 18rpx;
        font-size: 30rpx;
        font-family: PingFang SC;
        font-weight: 600;
        color: #282828;
        line-height: 30rpx;
      }

      &>view:last-child {
        font-size: 26rpx;
        font-family: PingFang SC;
        font-weight: 400;
        color: #696969;
        line-height: 26rpx;

        text {
          padding: 0 5rpx;
          color: #fc801c;
        }
      }
    }

    &-tip {
      &>view:first-child {
        font-size: 28rpx;
        font-family: PingFang SC;
        font-weight: 400;
        color: #4b4b4b;
        line-height: 36rpx;
      }

      &>view:last-child {
        font-size: 24rpx;
        font-family: PingFang SC;
        font-weight: 400;
        color: #b5b5b5;
        line-height: 36rpx;
      }
    }

    &-btn {
      width: 135rpx;
      height: 64rpx;
      background: #ffffff;
      border: 1rpx solid #cccccc;
      border-radius: 32rpx;
      text-align: center;
      display: inline-flex;
      justify-content: center;
      align-items: center;
      font-size: 28rpx;
      font-family: PingFang SC;
      font-weight: 400;
      color: #4b4b4b;
      line-height: 36rpx;

      image {
        width: 34rpx;
        height: 34rpx;
        margin-right: .3em;
      }
      a {
        text-decoration: none;
        color: #333;
      }
    }
  }

  .order-footer {
    font-size: 28rpx;
    font-family: PingFang SC;
    font-weight: 400;
    color: #4b4b4b;
    line-height: 36rpx;
    text-align: center;

    view {
      margin-top: 23rpx;
    }
  }

  .star {
    width: 52rpx;
    height: 52rpx;
  }

  .score-modal {
    .star {
      margin-right: 12rpx;
    }

    width: 600rpx;
    padding-bottom: 60rpx;
    // height: 480rpx;
    background: #ffffff;
    border-radius: 20rpx;
    position: relative;
    text-align: center;

    &-icon {
      position: absolute;
      height: 37rpx;
      width: 36rpx;
      right: 38rpx;
      top: 40rpx;
    }

    &-head {
      font-size: 32rpx;
      font-family: PingFang SC;
      font-weight: 600;
      color: #4b4b4b;
      line-height: 40rpx;
      margin-bottom: 60rpx;
      padding-top: 57rpx;
    }

    .score-list {
      display: flex;
      justify-content: center;
      align-items: center;
    }

    &-body {}

    &-count {
      margin-left: 14rpx;
      font-size: 30rpx;
      font-family: PingFang SC;
      font-weight: 400;
      color: #4b4b4b;
      line-height: 40rpx;
    }

    &-btn {
      margin: 63rpx auto 0;
      width: 280rpx;
      height: 80rpx;
      background: linear-gradient(90deg, #4aabf6, #4675f6);
      box-shadow: 0rpx 16rpx 30rpx 0rpx rgba(74, 169, 246, 0.2);
      border-radius: 40rpx;
      font-size: 34rpx;
      font-family: PingFang SC;
      font-weight: 400;
      line-height: 80rpx;
      color: #ffffff;
    }
  }
}
</style>
